<template>
  <div class="classBaseInfoOperate">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改班级基本信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="addClassForm" :rules="addClassRules" ref="addClassForm" label-width="100px" class="demo-ruleForm fixed-form">
      <el-form-item label="班级编号" prop="classId">
        <el-input v-model="addClassForm.classId"></el-input>
      </el-form-item>
      <el-form-item label="班级名称" prop="className">
        <el-input v-model="addClassForm.className"></el-input>
      </el-form-item>
      <el-form-item label="简称" prop="classShortName">
        <el-input v-model="addClassForm.classShortName"></el-input>
      </el-form-item>
      <el-form-item label="所属专业" prop="majorId">
        <el-select
          v-model="addClassForm.majorId"
          placeholder="请选择所属专业"
          filterable
          remote
          clearable
          class="max-width">
          <el-option
            v-for="item in majorChoose"
            :label="item.majorName"
            :value="item.majorID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入学年份" required prop="enrollmentTime">
        <el-date-picker
          @change="toString"
          v-model="addClassForm.enrollmentTime"
          type="date"
          placeholder="选择日期"
          class="max-width">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="培养方案" prop="trainingSchemeId">
        <el-select v-model="addClassForm.trainingSchemeId" placeholder="请选择培养方案" class="max-width">
          <el-option
            v-for="item in trainingSchemeChoose"
            :label="item.trainingSchemeStore"
            :value="item.trainingSchemeID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('addClassForm')">立即修改</el-button>
        <el-button @click="resetForm('addClassForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'classBaseInfoOperate',
    data(){
      return {
        trainingSchemeChoose: [],
        majorChoose: [],
        oldClassId: '',
        addClassForm: {
          classId: '',
          className: '',
          classShortName: '',
          majorId: '',
          enrollmentTime: '',
          trainingSchemeId: ''
        },
        addClassRules: {
          classId: [
            {required: true, message: '请输入班级编号', trigger: 'blur'}
          ],
          className: [
            {required: true, message: '请输入班级编号', trigger: 'blur'}
          ],
          abbr: [
            {required: true, message: '请输入班级编号', trigger: 'blur'}
          ],
          belongProfession: [
            {required: true, message: '请输入班级编号', trigger: 'blur'}
          ],
          enrollmentTime: [
            {required: true, message: '请输入班级编号', trigger: 'change'}
          ],
          trainingSchemeId: [
            {required: true, message: '请输入班级编号', trigger: 'blur'}
          ]
        }
      }
    },
    components: {},
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      //to string
      toString(val){
        this.addClassForm.enrollmentTime = val;
      },
      init(){
        //alert(this.$route.params.classId);
        this.oldClassId = this.$route.params.classId;
        this.initContent();
        this.getClassInfo();
      },
      //init data
      initContent(){
        this.$http.get(this.$until.url + '/baseInfoCommon/initData').then(response => {
          //success
          for (const element of response.body.trainingSchemeAndId) {
            this.trainingSchemeChoose.push(element);
          }
          //
          for (const element of response.body.majorAndId) {
            this.majorChoose.push(element);
          }

        }, response => {
          console.log('文件获取失败');
        })
      },
      getClassInfo(){
        //alert(this.oldClassId);
        this.$http.get(this.$until.url + '/classBaseInfo/getClass',
          {
            params: {
              classId: this.oldClassId
            }
          }).then(response => {
          var msg = response.body.classList[0]
          for (var key in msg) {
            this.addClassForm[key] = msg[key]
          }
          //console.log(response.body.classList[0])
        }, response => {
          console.log('服务器异常')
        });
      },
      //submit
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //
            console.log(this.addClassForm.enrollmentTime);
            this.$http.post(this.$until.url + '/classBaseInfo/updateClass', this.addClassForm, {
              params: {
                oldClassId: this.oldClassId
              },
              emulateJSON: true
            }).then(response => {
              //success
              this.$message({
                message: response.body.message,
                type: 'success'
              });
              this.$router.replace({path: '/ClassBaseInfo'});
            }, response => {
              console.log('文件获取失败');
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //
    }
  }
</script>
